<template>
    <div class="container">
        <img class="header img-responsive" :src="headerImg"/>
        <!--<div class="s-unit">-->
        <!--<div class="s-title c-shadow">主办单位</div>-->
        <!--<div class="s-content style-01">-->
        <!--<p>沈阳市商务局</p>-->
        <!--<p>沈阳市民政局</p>-->
        <!--<p>沈阳市财政局</p>-->
        <!--<p>沈阳市市场监管局市税务局</p>-->
        <!--<p>沈阳市委宣传部</p>-->
        <!--<p>沈阳市委网信办</p>-->
        <!--<p>沈阳市信息中心</p>-->
        <!--<p>辽宁省沈阳市大东公证处</p>-->
        <!--</div>-->
        <!--</div>-->
        <subsidy-msg :msg="true"></subsidy-msg>
<!--        <div class="s-flow">-->
<!--            <div class="item">-->
<!--                <img :src="szIcon"/>-->
<!--                <div class="t">预约登记</div>-->
<!--                <div class="d">2020-06-14</div>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <img :src="cjIcon"/>-->
<!--                <div class="t">随机摇号</div>-->
<!--                <div class="d">2020-06-16</div>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--                <img :src="hbIcon"/>-->
<!--                <div class="t">发放卡券</div>-->
<!--                <div class="d">2020-06-17</div>-->
<!--            </div>-->
<!--        </div>-->
        <!--<div class="inscription">沈阳市人民政府</div>-->
        <div class="footer">
            <div @click="getNum('0')" class="get-no" v-if="credential_code === ''">立即预约报名</div>
            <div @click="getNum('1')" class="my-no" v-else>兑奖号码: {{credential_code}}</div>
        </div>
        <van-popup v-model="showReadme" :close-on-click-overlay="true" safe-area-inset-bottom
                   :style="{ width: '80%', position: 'fixed', top: '30%', borderRadius: '10px' }">
            <div class="readme-popup">
                <div class="readme-popup-title">填写预约报名信息</div>
                <div class="readme-popup-content">
                    <van-cell-group>
                        <van-field
                                v-model="username"
                                required
                                label="真实姓名"
                                icon="question-o"
                                @blur="bodyScrollTop"
                                @focus="bodyScrollTop"
                                placeholder="请输入真实姓名"
                        />

                        <van-field
                                v-model="id_card"
                                label="身份证号"
                                placeholder="请输入身份证号"
                                required
                                @blur="bodyScrollTop"
                                @focus="bodyScrollTop"
                                :border="false"
                        />
                        <!--<div class="van-cell van-cell&#45;&#45;required van-cell&#45;&#45;borderless van-field">-->
                        <!--<div class="van-cell__title van-field__label"><span>卡券类型</span></div>-->
                        <!--<div class="van-cell__value van-field__value">-->
                        <!--<div class="van-field__body">-->
                        <!--<van-radio-group v-model="type" direction="horizontal">-->
                        <!--<van-radio name="XF" icon-size="22px">消费券</van-radio>-->
                        <!--<van-radio name="ZH" icon-size="22px">综合券</van-radio>-->
                        <!--</van-radio-group>-->
                        <!--</div>-->
                        <!--</div>-->
                        <!--</div>-->
                    </van-cell-group>
                </div>
                <div class="desc"><span style="color: red;">※</span>请填写与此微信实名认证一致的姓名及证件号!</div>
                <div class="readme-popup-btn">
                    <van-button block type="info"
                                native-type="button"
                                size="small"
                                class="readme-popup-btn-sm"
                                :loading="loading"
                                color="linear-gradient(to bottom, #fcdfc3, #f9cc7f)"
                                @click="choose">
                        立即预约报名
                    </van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { getByOpenid, ctSignupRecordInsert } from '@/api/yi-qing-fang-kong.js'
// 工具
import { identityCodeValid } from '@/libs/tools'
// 组件
import SubsidyMsg from './components/subsidy-msg/index'
import { getCookie, saveCookie } from '@/libs/util'

export default {
  components: { SubsidyMsg },
  data () {
    this.idCardRules = [
      { required: true, message: '请输入证件号' },
      { validator: this.idCardValidator, message: '证件号不正确' }
    ]
    return {
      showReadme: false,
      username: '',
      id_card: '',
      type: '',
      credential_code: '',
      headerImg: require('@/assets/images/zonghe.png'),
      cjIcon: require('@/assets/images/cj_icon.png'),
      hbIcon: require('@/assets/images/hb_icon.png'),
      szIcon: require('@/assets/images/sz_icon.png'),
      loading: false,
      firstMsg: ''
    }
  },
  computed: {
    getActiveId () {
      if (this.$route.query.qs) {
        return '0'
      } else {
        return '10'
      }
    }
  },
  methods: {
    idCardValidator (val) {
      // 身份证
      const reg1 = identityCodeValid(val)
      if (!reg1.pass) {
        // this.failNotice('请检查身份证格式！')
        return false
      }
    },
    getNum (data) {
      if (data === '1') {
        // alert('测试：有码也能点击，上生产删除')
      }
      if (data == '0') {
        if (this.firstMsg == '') {
          this.showReadme = true
        } else {
          this.$dialog.alert({
            message: this.firstMsg
          })
        }
      }
    },
    choose () {
      console.log(this.username)
      if (this.username === '' || this.username === undefined || this.username === null) {
        this.$dialog.alert({
          message: '请输入姓名!'
        })
        return false
      }
      if (this.id_card === '' || this.id_card === undefined || this.id_card === null) {
        this.$dialog.alert({
          message: '请输入身份证号!'
        })
        return false
      } else {
        if (this.idCardValidator(this.id_card) === false) {
          this.$dialog.alert({
            message: '请输入真实身份证号!'
          })
          return false
        }
      }
      // if (this.type === '' || this.type === undefined || this.type === null) {
      //  this.$dialog.alert({
      //    message: '请选择卡劵类型!'
      //  })
      //  return false
      // }
      this.loading = true
      let data = {
        id_card: this.id_card,
        name: this.username,
        // type: this.type,
        activity_id: this.getActiveId
      }
      ctSignupRecordInsert(data).then(ret => {
        this.loading = false
        if (ret.data.errcode === 0) {
          this.showReadme = false
          this.init()
        } else {
          this.failNotice(ret.data.errmsg + ' 「' + ret.data.sid + '」')
        }
      })
    },
    init () {
      let subsidySwj = getCookie('subsidySwj')
      // console.log(subsidySwj, '0---0')
      if (subsidySwj) {
        let obj = JSON.parse(subsidySwj)
        // console.log(obj, (obj.time + 28800000), new Date().getTime(), '--==-=-=')
        if ((obj.time + 43200000) > new Date().getTime()) {
          this.credential_code = obj.code
          this.$dialog.alert({ message: '您已经成功报名！' })
          return false
        }
      }
      getByOpenid({ activity_id: this.getActiveId }).then(ret => {
        if (ret.data.errcode === 0) {
          // --判断是否实名认证授权
          if (ret.data.data.flag == '0') {
            if (ret.data.data.isIn != '') {
              this.$dialog.alert({
                message: ret.data.data.isIn
              })
              this.firstMsg = ret.data.data.isIn
              return false
            }
            if (this.$config.debug) {
              window.location.href = this.$config.publicPath.pro + '/api5/uc/ctc/ctSignupRecordService/index?debug=0'
            } else {
              window.location.href = this.$config.publicPath.pro + '/api5/uc/ctc/ctSignupRecordService/index'
            }
          } else if (ret.data.data.flag == '2') {
            // ---报名成功
            saveCookie('subsidySwj', JSON.stringify({
              code: ret.data.data.credential_code,
              time: new Date().getTime()
            }))
            this.$dialog.alert({ message: '您已经成功报名！' })
          } else if (ret.data.data.flag == '1') {
            if (ret.data.data.isIn != '') {
              this.$dialog.alert({
                message: ret.data.data.isIn
              })
              this.firstMsg = ret.data.data.isIn
              return false
            }
          }
          if (ret.data.data.credential_code) {
            this.credential_code = ret.data.data.credential_code
          }
        } else {
          this.failNotice(ret.data.errmsg)
        }
      })
    },
    failNotice (title) {
      this.$notify({ type: 'danger', message: title })
    },
    bodyScrollTop () {
      winToTop()
    }
  },
  mounted () {
    // console.log(this.$common.xeUtils.locat().protocol == 'http:')
    // if (this.$common.xeUtils.locat().protocol == 'http:') {
    //  window.location.href = 'https://shengst.tripln.top/#/subsidy-swj-index'
    // } else {
    //  this.init()
    // }
    this.init()
  }
}
</script>

<style scoped>
    .container {
        /*background-color: #a91e23;*/
        min-height: 1000px;
        padding-bottom: 45px;
    }

    .img-responsive {
        display: inline-block;
        height: auto;
        max-width: 100%;
    }

    .s-flow {
        display: flex;
        margin-top: 20px;
        padding: 20px;
    }

    .s-flow .item {
        width: 33%;
        text-align: center;
    }

    .s-flow img {
        width: 30px;
        height: 30px;
        margin-bottom: 10px;
    }

    .s-flow .t {
        font-size: 14px;
        color: #3ea47f;
        margin-bottom: 5px;
    }

    .s-flow .d {
        font-size: 12px;
        color: #5a8f7f;
    }

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 3px 20px;
        background-color: rgb(133, 218, 233);
        z-index: 999;
    }

    .footer .get-no {
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        color: white;
        text-align: center;
        padding: 5px 0;
        background-image: linear-gradient(#15b5d2, #0d5a9b);
        border-radius: 50px;
    }

    .readme-popup {
        padding: 10px;
    }

    .readme-popup-title {
        text-align: center;
        padding: 8px 0;
        color: #468b6f;
    }

    .inscription {
        width: 100%;
        text-align: center;
        margin: 15px;
        font-size: 14px;
        color: white;
    }

    .footer .my-no {
        width: 100%;
        text-align: center;
        font-weight: bold;
        color: #5f9f55;
        font-size: 16px;
        padding: 10px 0;
    }

    .container >>> .van-radio__label {
        margin-left: 5px;
    }

    .container >>> .van-field__label {
        width: 4.625rem;
    }

    .container >>> .van-radio--horizontal {
        margin-right: 5px;
    }

    .container >>> .van-cell {
        padding: 0.625rem;
    }

    .container >>> .van-cell--required::before {
        left: 0;
    }

    .desc {
        margin: 3px 0;
        padding: 3px 5px;
        font-size: 12px;
        border: 1px dot-dash #fcdfc3;
        border-radius: 5px;
        color: #888888;
    }
</style>
